<template>
    <div class="user-integral">
        <div class="user-integral-tel">
            <p>账户余额（元）</p>
            <p>{{balance}}</p>
            <button class="tixian" @click="withdraw">提现</button>
            <button class="chongzhi">充值</button>
        </div>
        <!-- 标题 -->
        <!-- <CommonTel></CommonTel> -->
        <ul class="tabs clearfix">
            <li v-for="(tab,index) in tabsName">
                <a class="tab-link" @click="tabsSwitch(index)" v-bind:class="{active:tab.isActive}" >{{tab.name}}</a>
            </li>
        </ul>
        <div class="cards">
            <div class="tab-card" style="display: block;">
                <div class="user-integral-form" v-for="(item,index) in inte">
                    <span class="user-integral-name" v-if="item.status = 1">
                        <em class="gray">进账</em> <em >{{item.note}}</em>
                    </span>
                    <span class="user-integral-name" v-if="item.status = 0">
                        <em class="gray">支出</em> <em >{{item.note}}</em>
                    </span>
                    <span class="user-integral-time">
                        <p class="gray">{{item.create_time}}</p>
                        <p>{{item.money}}</p>
                    </span>
                </div>
            </div>
            <!-- <div class="tab-card">
                <div class="user-integral-form" v-for="(item,index) in inte">
                    <span class="user-integral-name">
                        <em class="gray">支出</em> <em >{{item.note}}</em>
                    </span>
                    <span class="user-integral-time">
                        <p class="gray">{{item.create_time}}</p>
                        <p>{{item.money}}</p>
                    </span>
                </div>
            </div> -->
        </div>

    </div>
</template>

<script>
// import CommonTel from '../../Common-tel/Common-tel';
    import {formatDate} from '../../../../static/data.js';
    import axios from "axios";
    import $qs from 'qs'
    export default {
        name:"UserIntegral",
        data(){
            return {
                inte:[],
                balance:'',
                tabsName: [
                    {
                        name: "进账",
                        isActive: true
                    }, {
                        name: "支出",
                        isActive: false
                    }
                ],
                active: false
            
            }
        },
        components: {
            // CommonTel
        },
        methods:{
            tabsSwitch: function(tabIndex) {
                console.log(tabIndex)
                var tabCardCollection = document.querySelectorAll(".tab-card"),
                    len = this.tabsName.length;
                for(var i = 0; i < len; i++) {
                    this.tabsName[i].isActive = ( i == tabIndex );
				}
				switch(tabIndex)
				{
					case 0:
						this.money(0)
					break;
					case 1:
						this.money(1)
					break;
					
				}
            },
            money:function(type){
                var that = this
                var openid = localStorage.getItem("openid")
                // var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
                let pageList = that.$qs.stringify({
                    openid: openid,
                    Record_type:type
                });
                axios({
                    method: "post",
                    url: "/index/user/amountRecord",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: pageList
                }).then(res => {
                    console.log(res.data);
                    console.log(res.data.user);
                    for(var i in res.data) {
                        res.data[i].list.create_time = formatDate(new Date(res.data[i].list.create_time * 1000), 'yyyy-MM-dd')
                    }
                    this.inte = res.data[0].list,
                    this.balance = res.data[1].user.balance
                });
            },
            withdraw:function(){
                var that = this
                var openid = localStorage.getItem("openid")
                let pageList = that.$qs.stringify({
                    openid: openid,
                });
                axios({
                    method: "post",
                    url: "/withdraw",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    data: pageList
                }).then(res => {
                    console.log(res.data);
                    if(res.data.status == 400){
                        alert(res.data.info)
                    }else if(res.data.status == 200){
                        alert(res.data.info)
                        this.balance = 0.00
                        this.$router.go(-1)
                    }
                });
            }
        },
        mounted(){
            this.money(0);
        }
    }
</script>

<style scoped>
.cards .tab-card {
    display: none;
}
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.tab-link{
    width:50%;
    float: left;
    text-align: center;
}
.active{
    color:#FE2746;
    font-weight: 600;
    background-color:#f9f9f9 !important;
}


.user-integral-form{
    width: 94%;
    margin-left: 3%;
    background: #FFF;
    border-radius: 5px;
    margin-top: 15px;
    display: inline-block;
}
.user-integral-tel{
    width:100%;
    text-align: center;
    margin:25px 0;
}
.user-integral-tel p:nth-child(2){
    font-weight: 600;
    font-size:20px;
    margin-top:10px;
}
.gray{
    color:#999;
}
.user-integral-name{
    float: left;
    padding:20px 12px; 
}
.user-integral-time{
    text-align: right;
    float:right;
    padding: 12px;
}
.user-integral-time .gray{
    font-size:12px;
}
.tixian{
    width: 45px;
    height: 25px;
    line-height: 20px;
    border-radius: 35px;
    background-color: rgba(255, 0, 37, 1);
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
    color:#FFF;
    margin-top:10px;
    margin-right: 10px;
}
.chongzhi{
    left: 135px;
    top: 405px;
    width: 45px;
    height: 25px;
    line-height: 20px;
    border-radius: 35px;
    background-color: rgba(254, 39, 70, 0.08);
    text-align: center;
    border: 1px solid rgba(254, 39, 70, 0.08);
}
</style>